<template>
	<div class="selectgrid">
		<el-form :model="information" class="demo-ruleForm" label-width="120px" status-icon style="width: 800px;" >
		<el-card class="box-card" style="height: 80vh;">
			
			<template #header>
				<div class="card-header">
					<span><h3>选择AQI</h3></span>
				</div>
			</template>
		<el-form-item label="请预估当前空气质量指数等级:">
			<br />
			  <el-radio-group v-model="information.provideAQI">
				<el-radio border value="1" >一级</el-radio>
				<el-radio border value="2" >二级</el-radio>
				<el-radio border value="3" >三级</el-radio>
				<el-radio border value="4" >四级</el-radio>
				<el-radio border value="5" >五级</el-radio>
			  </el-radio-group>
		</el-form-item>
		
		<el-form-item label="请填写反馈信息:">
			<br />
			<el-input
				v-model="information.provideFeedback"
				style="width: 240px"
				:rows="2"
				type="textarea"
				placeholder="请填写反馈信息"
			/>
		</el-form-item>
		
		<el-button @click="submit" size='large'>提交</el-button>
		<el-button @click="test" size='large'>测试</el-button>
		
			</el-card>
		</el-form>
	</div>
</template>

<script  setup>
import { computed, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useDateFormatter } from '@/composables/UserDateFormatter'
// import axios from 'axios';
import axios from '../../axios';

const router=useRouter()
const route=useRoute()
const routequery=route.query
const tokenValue=localStorage.getItem('token')
let information=ref({
	provideAQI:'',
	provideFeedback:''	
})
console.log(information.value)


const currentDate = ref(new Date)
const formattedDate=computed(()=>{
	return useDateFormatter(currentDate.value,'yyyy-MM-dd hh:mm:ss').value
})
let test=()=>{
	currentDate.value=new Date()
	console.log(currentDate.value)
	console.log(formattedDate.value)
}


let submit=()=>{
currentDate.value=new Date()
const date = computed(() => formattedDate.value.slice(0, 10))
const time = computed(() => formattedDate.value.slice(11, 19))
let dataJson={
			cityId:route.query.city,
			provinceId:route.query.province,
			address:route.query.detailedAddress,
			feedbackAqi:information.value.provideAQI,
			content:information.value.provideFeedback,
			time:time.value,
			date:date.value,
		}
		console.log(tokenValue)
	axios.post("http://192.168.231.54:7000/service-supervisor/supervisor/addFeedback",dataJson,
	{
		headers: {
		  'Authorization': `Bearer ${tokenValue}` // 在请求头中添加 Bearer Token
		},
	})
	.then(res=>{
		let result=res.data
		router.push({
			path:'/supervisor/historylist',
			query:{
				province:route.query.province,
				city:route.query.city,
				date:formattedDate.value,
				provideAQI:information.value.provideAQI,
				token:routequery.token
			}
		})
	})
}
</script>

<style>
	.selectgrid{
		height: 100vh;
		display:flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
		background-color: gray;
	}
	.demo-ruleForm {
		height: 80vh;
		width: 50vw;
		display: flex;
		justify-content: center; 
		align-items: center; 
		height: 80vh; 
	  
	}
</style>